<template>
	<div>
		<el-card>
			<vxe-toolbar>
				<template #buttons>
					<vxe-button status="success" icon="fa fa-plus" @click="insertEvent()">新增</vxe-button>
					<vxe-button status="danger" icon="fa fa-trash-o" @click="$refs.xTable.removeCheckboxRow()"><span @click='delete1()'>删除</span></vxe-button>
					<vxe-button status="primary" icon="fa fa-save" @click="saveEvent()">保存</vxe-button>
					<vxe-button icon="fa fa-comment-o" @click="evaluateEvent()">评价</vxe-button>
					<div style="width:300px;float:right" >
						<el-input 	prefix-icon="el-icon-user-solid"
						suffix-icon="el-icon-search"
            class="inline-input"  v-model="searchVal" @keyup.enter.native="search()" placeholder="搜索员工"></el-input>
					</div>
				</template>
			</vxe-toolbar>
			<vxe-modal v-model="showEdit" :title="'评价'" width="800" min-width="600" min-height="300" :loading="submitLoading" resize destroy-on-close>
				<template #default>
					<vxe-form :data="formData" :items="formItems" :rules="formRules" title-align="right" title-width="100" @submit="closeevaluate()"></vxe-form>
				</template>
			</vxe-modal>
			<vxe-table
				:align="'center'"
				border
				highlight-hover-row
				show-overflow
				keep-source
				ref="xTable"
				max-height="500"
				:data="tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)"
				:edit-config="{ trigger: 'click', mode: 'cell', icon: 'fa fa-pencil', showStatus: true }"
			>
				<vxe-table-column type="checkbox" width="60"></vxe-table-column>
				<vxe-table-column type="seq" width="60"></vxe-table-column>
				<vxe-table-column field="staffJobnumber" title="工号" width="120" sortable :edit-render="{ name: 'input' }"></vxe-table-column>
				<vxe-table-column
					field="staffName"
					title="姓名"
					width="120"
					sortable
					:edit-render="{ name: 'input', defaultValue: '名字' }"
				></vxe-table-column>
				<vxe-table-column field="staffGender" title="性别" width="100" :edit-render="{ name: '$select', options: sexList }"></vxe-table-column>
				<vxe-table-column field="staffAge" title="年龄" width="120" sortable :edit-render="{ name: 'input', defaultValue: 18 }"></vxe-table-column>
				<vxe-table-column field="staffDepartment" title="部门" width="120" sortable :edit-render="{ name: 'input' }"></vxe-table-column>
				<vxe-table-column field="staffJob" title="职位" width="120" sortable :edit-render="{ name: 'input' }"></vxe-table-column>
				<vxe-table-column field="staffPhone" title="手机号码" width="150" sortable :edit-render="{ name: 'input' }"></vxe-table-column>
				<vxe-table-column field="staffCollege" title="学校" width="150" sortable :edit-render="{ name: 'input' }"></vxe-table-column>
				<vxe-table-column field="staffMajor" title="专业" width="120" sortable :edit-render="{ name: 'input' }"></vxe-table-column>
				<vxe-table-column field="staffIndate" title="入校时间" width="200" sortable :edit-render="{ name: 'input' }"></vxe-table-column>
				<vxe-table-column field="staffEnddate" title="毕业时间" width="200" sortable :edit-render="{ name: 'input' }"></vxe-table-column>
				<vxe-table-column field="staffEducation" title="学历" width="120" sortable :edit-render="{ name: 'input' }"></vxe-table-column>
				<vxe-table-column field="staffDegree" title="学位" width="120" sortable :edit-render="{ name: 'input' }"></vxe-table-column> </vxe-table
			><br />
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[5, 10, 20, 30]"
				:page-size="10"
				layout="total, sizes, prev, pager, next, jumper"
				:total="tableData.length"
			>
			</el-pagination>
		</el-card>
	</div>
</template>

<script>
import axios from 'axios';
import { defineComponent } from 'vue'
import { ElMessage } from 'element-plus'
export default {
	name: 'staffArchives',
	mounted: function () {
		this.findAllStaff();
	},
	methods: {
		alert(setting) {
			this.title = setting.title || '标题';
			this.content = setting.content || '内容';
			this.onOk = setting.onOk || false;
			this.onCancel = setting.onCancel || false;
			this.show = true;
			document.body.style.overflow = 'hidden';
		},
		async insertEvent(row) {
			const $table = this.$refs.xTable;
			const record = {
				sex: '1',
			};
			const { row: newRow } = await $table.insertAt(record, row);
			await $table.setActiveCell(newRow, 'sex');
		},

		// 点击搜索工程
		search(){
			// 支持模糊查询
			// this.xmgcqkJsonsData：用于搜索的总数据
			　 //　toLowerCase():用于把字符串转为小写，让模糊查询更加清晰
			var that = this;
			let _search = this.searchVal.toLowerCase();
			axios.get('http://localhost:8081/staff-archives/staffName=' + _search)
			.then(function(response){
					that.tableData =  response.data;
					if (that.tableData == '') {
						ElMessage.warning({
							message: '搜索失败,暂无该员工信息',
							type: 'warning'
						});
					}else{
						ElMessage.success({
            message: '搜索成功！！！',
            type: 'success'
					});
					}

			})
			.catch(function(err){
					ElMessage.warning({
            message: '搜索失败！',
            type: 'warning'
          });
			})
		},

		evaluateEvent() {
			this.formData = {
				name: '',
				date3: '',
				address: '',
			};
			this.selectRow = null;
			this.showEdit = true;
		},
		closeevaluate() {
			this.showEdit = false;
			this.$message({
				message: '成功完成对该员工的评价！',
				type: 'success',
			});
		},
		getInsertEvent() {
			const $table = this.$refs.xTable;
			const insertRecords = $table.getInsertRecords();
			this.$XModal.alert(insertRecords.length);
		},
		getSelectionEvent() {
			const $table = this.$refs.xTable;
			const selectRecords = $table.getCheckboxRecords();
			this.$XModal.alert(selectRecords.length);
		},
		saveEvent() {
			const $table = this.$refs.xTable;
			this.$message({
				message: '保存成功！',
				type: 'success',
			});
		},
		findAllStaff() {
			var that = this;
			axios
				.get('http://121.41.117.22:8081//staff-archives/findAll')
				.then(function (response) {
					that.tableData = response.data;
				})
				.catch(function (err) {});
		},
		handleEdit(index, row) {
			console.log(index, row);
		},
		handleDelete(index, row) {
			console.log(index, row);
		},
		handleSizeChange(val) {
			console.log(`每页 ${val} 条`);
			this.currentPage = 1;
			this.pageSize = val;
		},
		handleCurrentChange(val) {
			console.log(`当前页: ${val}`);
			this.currentPage = val;
		},
		deleteRow(index, rows) {
			rows.splice(index, 1);
		},
		delete1(){
			this.$message({
				message: '删除成功！',
				type: 'success',
			});
		}
	},
	data() {
		return {
			sexList: [
				{ label: '女', value: '0' },
				{ label: '男', value: '1' },
			],
			tableData: '',
			searchVal: '',
			currentPage: 1, // 当前页码
			total: 30, // 总条数
			pageSize: 10, // 每页的数据条数
			showEdit: false,
			formData: {
				name: null,
				role: null,
				age: null,
				num: null,
				checkedList: [],
				flag1: null,
				date3: null,
				address: null,
			},
			formRules: {
				name: [
					{ required: true, message: '请输入名称' },
					{ min: 2, max: 5, message: '长度在 2 到 5 个字符' },
				],
			},
			formItems: [
				{ title: '基本信息', span: 24, titleAlign: 'left', titleWidth: 200, titlePrefix: { icon: 'fa fa-address-card-o' } },
				{ field: 'name', title: '姓名', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入姓名' } } },
				{ field: 'role', title: '职位', span: 12, itemRender: { name: '$input', props: { placeholder: '请输入职位' } } },
				{
					title: '评价内容',
					span: 24,
					titleAlign: 'left',
					titleWidth: 200,
					titlePrefix: { message: '请填写必填项', icon: 'fa fa-info-circle' },
				},
				{ field: 'date3', title: '评价日期', span: 12, itemRender: { name: '$input', props: { type: 'date', placeholder: '请选择日期' } } },
				{
					field: 'evaluate',
					title: '评价内容',
					span: 24,
					titleSuffix: { message: '提示信息！！', icon: 'fa fa-question-circle' },
					itemRender: { name: '$textarea', props: { autosize: { minRows: 2, maxRows: 4 }, placeholder: '请输入评价内容' } },
				},
				{
					align: 'center',
					span: 24,
					titleAlign: 'left',
					itemRender: {
						name: '$buttons',
						children: [{ props: { type: 'submit', content: '提交', status: 'primary' } }, { props: { type: 'reset', content: '重置' } }],
					},
				},
			],
		};
	},
};
</script>
<style lang="scss">
</style>
